<#assign base = request.contextPath />
<html lang="zh">
<head>
<meta charset="UTF-8">
<base id="base" href="${base}">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
	<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>场馆用户注册</title>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.min.js"></script>
<style>
	.wrapper {
		background: #50a3a2;
		background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
		background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
		opacity: 0.8;
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;

	}
	body{    margin: 0px; color:  white;font-weight: 300;}
	.bg-bubbles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}


</style>
</head>

<body>
<!-- 代码 开始 -->
<div class="wrapper">
	<form class="form-horizontal" style="width: 600px; margin: 0 auto;  margin-top: 10%;">
		<h1 style="text-align: center;">场馆注册</h1>
		<div class="form-group">
			<label  class="col-sm-2 control-label">用户名</label>
			<div class="col-sm-10">
				<input name="userName" type="text" class="form-control"  placeholder="请输入用户名">
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">密码</label>
			<div class="col-sm-10">
				<input name="userPassword" type="password" class="form-control" maxlength="12" minlength="6" placeholder="请输入6-12位密码">
			</div>
		</div>
		<div class="form-group">
			<button type="submit" name="submit" class="btn btn-primary">Submit</button>
		</div>
	</form>

</div>


<script>
	$(function() {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userName: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                userPassword: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        }
                    }
                }
            }
        });

    });


</script>

</body>
</html>